<template>
  <div>
    <!-- 添加新用户 -->
    <el-popover
      placement="right"
      offset="1"
      title="新增用户"
      width="200"
      trigger="click"
    >
      <div class="bigbox" popper-class="bigboxpoper">
        <div class="box">
          <label for=""
            >姓名:<el-input
              v-model="inputname"
              placeholder="请输入姓名"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >年龄:<el-input
              v-model="inputage"
              placeholder="请输入年龄"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >性别:<el-select
              v-model="select"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option> </el-select
          ></label>
        </div>

        <div class="box">
          <label for=""
            >地址:<el-input
              v-model="inputadders"
              placeholder="请输入地址"
            ></el-input
          ></label>
        </div>

        <div class="box">
          <label for=""
            >出生日期:<el-date-picker
              v-model="inputdate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker
          ></label>
        </div>
        <div class="tianjiabutton">
          <el-popover placement="top" width="160" v-model="visible">
            <p>这个新用户确定添加吗？</p>
            <div style="text-align: left; margin: 0">
              <el-button size="mini" type="text" @click="visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="adduser"
                >确定</el-button
              >
            </div>
            <el-button slot="reference">添加</el-button>
          </el-popover>
        </div>
      </div>
      <el-button slot="reference">+新增</el-button>
    </el-popover>
    <div class="inputsolt">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="souuser"
        >搜索</el-button
      >
    </div>
    <!-- 中间表格 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      height="400"
      border
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="gender" label="性别" width=":180">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width=":180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <!-- 删除操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelet(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //  表格数据源
      tableData: [],
      currentPage: 1, //当前数据页
      pageSize: 5, //每页条数
      // 新增用户
      visible: false,
      input: "",
      inputname: "",
      inputage: "",
      select: [],
      inputadders: "",
      inputdate: "",
      // 新数组用来接收新增用户的值
      newarr: [
        {
          date: "",
          name: "",
          gender: "",
          age: null,
          address: "",
        },
      ],
    };
  },
  //  生命周期
  created() {
    // 接收来自vuex的数据
    console.log(this.tableData);
    this.tableData = this.$store.state.tableData;
  },
  methods: {
    // 编辑按钮
    handleEdit() {},
    // 删除按钮
    handleDelet(one, two) {
      if (this.currentPage == 1) {
        this.$store.commit("delet", one);
      } else {
        this.$store.commit("delet", (this.currentPage - 1) * 5 + one);
      }
    },
    // 选择一页显示多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    // 当前页改变时，跳转其他页面
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 新增用户数据
    adduser() {
      this.visible = false;
      this.newarr = {
        date: this.inputdate.toLocaleDateString(),
        name: this.inputname,
        gender: this.select,
        age: this.inputage,
        address: this.inputadders,
      };
      this.$store.commit("jiauser", this.newarr);
    },
    // 搜索用户信息
    souuser() {
      if (this.input == "") {
        // 搜索框为空，展示全部内容
        return this.tableData;
      } else {
        let array = [];
        // 搜索框有值就进行对比
        this.tableData.map((item) => {
          if (item.name.includes(this.input) == true) {
            array.push(item);
            return array;
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.userbox {
  position: absolute;
}
.inputsolt {
  margin-left: 650px;
  margin-top: -40px;
}
.el-input {
  width: 200px;
}
</style>